<template>
    <div class="my-container w-full h-full">
        <div class="top">
            <div class="back cursor-pointer" @click="back">
                <img class="w-12 h-12 lg:w-20 lg:h-20" src="/images/backIcon.png" alt="" />
                <span class="text-2xl lg:text-4xl">返回</span>
            </div>
            <h2 class="text-2xl lg:text-4xl">查看报告</h2>
        </div>
        <div
        class="dialog-box-contaner"
      >
        <div class="dialog-box">
          <div class="dialog-body">
            <div class="body-title">温馨提示</div>
            <div class="body-content">您的报告正在生成中，请耐心等待</div>
          </div>
          <div class="dialog-bottom ">
            <div class="btn-confirm mx-16 w-full cursor-pointer" @click="confirm">生成中,请稍后...</div>
          </div>
        </div>
      </div>
      <MyAlert ref="myAlert"></MyAlert>
    </div>
</template>

<script setup>
import {ref,onMounted,onBeforeUnmount} from 'vue'
import {useRouter} from 'vue-router'
import * as QRCode from 'qrcode'
import MyAlert from '@/components/alert/index.vue'
import {fetchGenerateReport,fetchGetPayStat} from '@/assets/api/index.js'
const baseUrl = import.meta.env.BASE_URL

const router = useRouter()
const myAlert = ref()

const back = ()=> {
    router.push('/')
}
let timer = ''

const getReport  = async ()=>{
  let res = await fetchGenerateReport()
  if(res.code !== 0){
    if(res.code == -2){
          return myAlert.value.showAlert('支付获取报告',true,()=>{
            router.replace('/pay')
        })
    }
    return myAlert.value.showAlert(res.message)
  }
  console.log('获取报告完成',res)
  router.replace(`/webview?report_url=${res.data.report_url}`)
}

onMounted(()=>{
    // timer = setTimeout(()=>{
    //     myAlert.value.showAlert('支付获取报告',true,()=>{
    //         router.push('/pay')
    //     })
    // },2000)
    getReport()
})
onBeforeUnmount(()=>{
    // clearTimeout(timer)
})

</script>

<style  scoped>
.my-container .top {
    position: absolute;
    width: 100%;
    height: 15%;
    /* background: white; */
    /* position: relative; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 2;
    top: 0;
    left: 0;
    /* color: white; */
}

.top .back {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top .back img {
    width: 4rem;
    margin-right: 1rem;
    cursor: pointer;
}

.back span {
    font-size: 2rem;
    color: white;
}

.top h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: white;
}

#right {
    z-index: 2;
    cursor: pointer;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 15%;
    height: 3rem;
    font-size: 1.5rem;
    background: linear-gradient(to right, rgb(150, 150, 249), rgb(105, 105, 252));
    /* background: blue; */
    border-radius: 2rem;
    border: none;
    color: white;
}

#left {
    z-index: 2;
    cursor: pointer;
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 15%;
    height: 3rem;
    font-size: 1.5rem;
    background: linear-gradient(to right, rgb(150, 150, 249), rgb(105, 105, 252));
    /* background: blue; */
    border-radius: 2rem;
    border: none;
    color: white;
}

.dialog-box-contaner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 1);
    }
    .dialog-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 57.9vw;
      height: 32.03vw;
      border-radius: 20px;
      background-color: #fff;
    }
    .dialog-body {
      padding: 5.07vw;
    }
    .body-title {
      font-size: 3.613vw;
      font-weight: bolder;
    }
    .body-content {
      margin-top: 2.441vw;
      font-size: 2.637vw;
    }
    .dialog-bottom {
      position: absolute;
      bottom: 5.27vw;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .dialog-bottom > div {
      width: 23.83vw;
      height: 7.03vw;
      font-size: 2.93vw;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 300px;
    }
    .btn-cancel {
      margin-right: 2.246vw;
      background-color: #d8ddd6;
      color: #000;
    }
    .btn-confirm {
      color: #fff;
      background: linear-gradient(
        to right,
        rgb(150, 150, 249),
        rgb(105, 105, 252)
      );
    }
</style>